<template>
    <div>
        <el-dialog title="订单信息" :visible.sync="dialogAddgsVisible"
                   @close="closeDialogAddgsVisible">
            <el-card class="box-card">
                <div v-for="item in orderData" style="margin-bottom: 20px">
                    <div><span>订单号：</span>{{item.orderNo}}</div>
                    <div><span>商品名称：</span>{{item.productName}}</div>
                    <div><span>商品单价：</span>{{item.unitPrice/100}}</div>
                    <div><span>商品数量：</span>{{item.quantity}}</div>
                    <div><span>总价：</span>{{item.totalPrice/100}}</div>
                </div>
            </el-card>
        </el-dialog>

        <el-dialog title="收件人信息信息" :visible.sync="userInfoVisible"
                   @close="closeUserInfoVisible">
            <el-card class="box-card">
                <div class="item text">
                    <div><span>姓名：</span>{{userData.receiverName}}</div>
                    <div><span>电话：</span>{{userData.receiverMobile}}</div>
                    <div><span>地址：</span>{{userData.receiverAddress}}</div>
                </div>

            </el-card>
        </el-dialog>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="orderNo" label="订单号" width="150"></el-table-column>
            <el-table-column fixed prop="totalPrice" label="订单总价" width="150">
                <template slot-scope="scope">
                    {{scope.row.totalPrice/100}}
                </template>
            </el-table-column>
            <el-table-column fixed prop="orderStatusName" label="订单状态" width="150"></el-table-column>
            <el-table-column fixed prop="paymentType" label="支付方式" width="150">
                <template slot-scope="scope">
                    {{scope.row.paymentType===1?'在线支付':'线下支付'}}
                </template>
            </el-table-column>
            <el-table-column fixed prop="createTime" label="创建时间" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" width="350">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="openOrderInfo(scope.row)">查看订单信息</el-button>
                    <el-button @click="openUserInfo(scope.row)" type="text" size="small">查看收件人信息</el-button>
                    <el-button @click="open(scope.row.orderNo)" type="text" size="small">已发货</el-button>
                    <el-button @click="openAccomplish(scope.row.orderNo)" type="text" size="small">订单完结</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="m-pagination">
            <el-pagination
                    :hide-on-single-page="value"
                    :total="pageTotal"
                    layout="prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {adminDelivered, adminOrderList,adminFinish} from "../../../utils/apis";

    export default {
        name: "adminOrder",
        data() {
            return {
                pageNum: 1,
                value: false,
                pageSize: 10,
                pageTotal: 0,
                tableData: [],
                dialogAddgsVisible: false,
                userInfoVisible: false,
                orderData: [],
                userData: {
                    receiverAddress: '',
                    receiverMobile: '',
                    receiverName: ''
                }
            }
        },
        mounted() {
            this.getOrderList()
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val
                this.getOrderList()
            },
            openOrderInfo(info) {
                this.orderData = info.orderItemVOList
                this.dialogAddgsVisible = true
            },
            openUserInfo(info) {
                console.log(info)
                this.userData.receiverAddress = info.receiverAddress
                this.userData.receiverMobile = info.receiverMobile
                this.userData.receiverName = info.receiverName
                console.log(this.userData)
                this.userInfoVisible = true
            },
            closeUserInfoVisible() {
                this.userData = []
                this.userInfoVisible = false
            },
            closeDialogAddgsVisible() {
                this.orderData = []
                this.dialogAddgsVisible = false
            },
            getOrderList() {
                adminOrderList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.list
                    this.pageTotal = res.data.total
                })
            },
            open(orderNo) {
                this.$confirm('请确认是否已发货', '发货', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    adminDelivered({
                        orderNo: orderNo
                    }).then(res => {
                        if (res.status === 10000) {
                            this.$message({
                                title: "success",
                                message: "success",
                                type: "success"
                            });
                            this.categoryList()
                        } else {
                            this.$message({
                                type: 'danger',
                                message: res.msg
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'danger',
                        message: '操作失败'
                    });
                });
            },
            openAccomplish(orderNo) {
                this.$confirm('请确认是否完结订单', '完结订单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    adminFinish({
                        orderNo: orderNo
                    }).then(res => {
                        if (res.status === 10000) {
                            this.$message({
                                title: "success",
                                message: "success",
                                type: "success"
                            });
                            this.categoryList()
                        } else {
                            this.$message({
                                type: 'danger',
                                message: res.msg
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'danger',
                        message: '操作失败'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .m-pagination {
        width: 100%;
        text-align: right;
    }
</style>
